
import React, { SetStateAction, useEffect, useState } from "react"
import { Popover } from 'antd';
import { useLocation, useNavigate } from "react-router-dom";
import triangleImage from "../../../../assets/image/hover@2x.png"
import userImage from "../../../../assets/image/头像@2x.png"
import dayjs from 'dayjs';


import lessModule from "./index.module.less"


// 头部菜单-标题组件
const HeaderMenuComponent_TitleCompoent: React.FC = () => {
    return (
        <div className={`${lessModule["homePageHeaderMenuComponent-left__headerMenuComponentTitleComponent"]}`}>
            <div className={`${lessModule["left-headerMenuComponentTitleComponent__titleBox"]}`}>
                <div className={`${lessModule["headerMenuComponentTitleComponent-titleBox__label"]}`}>
                    高速公路电力能耗与品质监测系统平台
                </div>

            </div>
            <div className={`${lessModule["left-headerMenuComponentTitleComponent__slash"]}`}></div>
        </div>
    )
}

// 头部菜单-tab组件
const HeaderMenuComponent_TabCompoent: React.FC = () => {
    const navigate = useNavigate();
    const tabList = [{ name: "全景监控", routerName: "panoramicMonitoring" }, { name: "变电站能耗", routerName: "substationEnergyConsumption" }, { name: "变电站供电品质", routerName: "powerSupplyQualityOfSubstation" }, { name: "数据管理", routerName: "dataManagement" }, { name: "系统配置", routerName: "systemConfiguration" },]
    const [tabName, setTabName] = useState<string>(tabList[0].name)

    const click_tab = (tabData: object) => {
        setTabName(tabData["name"])
        navigate(`/home/${tabData["routerName"]}`)
    }

    const locationData = useLocation()
    const init_tabName = () => {
        setTabName(tabList.find((item) => !locationData.pathname.split("/")[2] || item.routerName === locationData.pathname.split("/")[2])?.name ?? "")
    }
    useEffect(() => { 
        init_tabName()
    }, [locationData.pathname])
    return (
        <div className={`${lessModule["homePageHeaderMenuComponent-left__headerMenuComponentTabComponent"]}`}>
            {tabList.map((item, idx) => {
                return (
                    <div className={`${lessModule["left-headerMenuComponentTabComponent__tabItem"]}`} key={'tabList' + idx} onClick={() => click_tab(item)}>

                        <div className={`${lessModule["headerMenuComponentTabComponent-tabItem__content"]}`}>
                            <div
                                className={`${lessModule["tabItem-content__label"]}`}
                                style={{ color: tabName === item.name ? "#ffffff" : "#7A8F99" }}
                            >
                                {item.name}
                            </div>
                            {
                                tabName === item.name && <img
                                    className={`${lessModule["tabItem-content____img"]}`}
                                    src={triangleImage}
                                />
                            }
                        </div>
                        <div className={`${lessModule["headerMenuComponentTabComponent-tabItem__slash"]}`}></div>
                    </div>
                )
            }
            )}

        </div>
    )
}

// 头部菜单-日期组件
const HeaderMenuComponent_DateCompoent: React.FC = () => {
    const [dateInterval, setDateInterVal] = useState<SetStateAction<NodeJS.Timeout>>()
    const [dateData, setDateData] = useState<dayjs.Dayjs>()
    // 初始化
    useEffect(() => {
        setDateInterVal(
            setInterval(() => {
                setDateData(dayjs())
            }, 1000)
        )
        setDateData(dayjs())
    }, [])

    return (
        <div className={`${lessModule["homePageHeaderMenuComponent-right__headerMenuComponentDateCompoent"]}`}>
            <div className={`${lessModule["right-headerMenuComponentDateCompoent__date"]}`}>
                {dayjs().format("YYYY-MM-DD")}
            </div>
            <div className={`${lessModule["right-headerMenuComponentDateCompoent__time"]}`}>
                {dayjs().format("HH:mm:ss")}
            </div>
        </div>
    )
}

// 头部菜单-用户信息组件
const HeaderMenuComponent_UserInfoCompoent: React.FC = () => {
    const navigate = useNavigate();
    const content = (
        <div className={`${lessModule["right-popover__dropdown"]}`}>
            <div
                className={`${lessModule["popover-dropdown__option"]} ${lessModule["popover-dropdown__divide"]}`}
                onClick={()=>{navigate(`/home/systemConfiguration/accountManagement`)}}
            >
                账户信息
            </div>
            <div className={`${lessModule["popover-dropdown__option"]}`} onClick={() => { navigate("/login") }}>退出登录</div>
        </div>
    );

    return (

        <div className={`${lessModule["homePageHeaderMenuComponent-right__headerMenuComponentUserInfoCompoent"]}`}>
            <Popover overlayClassName={lessModule["right-headerMenuComponentUserInfoCompoent__popover"]} content={content} trigger="hover" placement="bottomRight">
                <div className={`${lessModule["right-headerMenuComponentUserInfoCompoent__content"]}`}>
                    <img
                        src={userImage}
                        className={`${lessModule["headerMenuComponentUserInfoCompoent-content__image"]}`}
                    />
                    <span className={`${lessModule["headerMenuComponentUserInfoCompoent-content__username"]}`}>156654</span></div>
            </Popover>
        </div>
    )
}

// 主页-头部菜单
const HomePage_HeaderMenuComponent: React.FC = () => {
    return (
        <div className={`${lessModule["homePageHeaderMenuComponent"]}`}>
            <div className={`${lessModule["homePageHeaderMenuComponent-left"]}`}>
                <HeaderMenuComponent_TitleCompoent />
                <HeaderMenuComponent_TabCompoent />
            </div>
            <div className={`${lessModule["homePageHeaderMenuComponent-right"]}`}>
                <HeaderMenuComponent_DateCompoent />
                <HeaderMenuComponent_UserInfoCompoent />
            </div>
        </div>
    )
}

export default HomePage_HeaderMenuComponent